<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<script src="js/jquery.js"></script>
	<script>
		$(() => {
			/*No cache for css*/
			$('link.cssLink').each((index, element) => {
				let url = $(element).attr('href');
				url += '?rand=' + Math.random();
				$(element).attr('href', url);
			});
			
			/*Auto completion function*/
			$('#searchInput').on('keydown', (e) => {
				let keyword = $(e.target).val();
				let requestData = 'keyword=' + keyword;
				console.log(requestData);
				$.ajax({
					url: 'Search',
					method: 'GET',
					accept: 'application/json',
					data: requestData,
					success: (productList, status) => {
						let dataList = $('#autoCompletion');
						/*Clear the origin datalist*/
						dataList.children().remove();
						productList.forEach((element, index) => {
							/*Max number of auto completion is 10
                            Although this should be done in server*/
							const MAX_NUMBER_OF_COMPLETION = 10;
							if (index < MAX_NUMBER_OF_COMPLETION) {
								dataList.append('<option class="autocomplete-option" value="' + element.name + '">' + element.name + '</option>');
							}
						});
						
					}
				});
			});
			
		});
	</script>
	<link class="cssLink" href="css/jpetstore.css" media="screen"
		  rel="StyleSheet" type="text/css"/>
	<link href="css/icono.min.css" rel="stylesheet" type="text/css">
	<link class="cssLink" href="css/mycss.css" rel="stylesheet" type="text/css">
	<meta content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org"
		  name="generator"/>
	<title>MyPetStore</title>
	<meta charset="UTF-8">
	<meta content="text/html; charset=UTF-8"
		  http-equiv="Content-Type"/>
	<meta content="max-age=0" http-equiv="Cache-Control"/>
	<meta content="no-cache" http-equiv="Cache-Control"/>
	<meta content="0" http-equiv="expires"/>
	<meta content="Tue, 01 Jan 1980 1:00:00 GMT" http-equiv="Expires"/>
	<meta content="no-cache" http-equiv="Pragma"/>
	<script src="js/jsencrypt.js" type="text/javascript"></script>
</head>
<body>
<div th:include="common/top.html::top"></div>

<script>
	let encrypter = new JSEncrypt();
	$.get('key', null, function (data) {
		encrypter.setPublicKey(data);
	});
	$(() => {
		
		let testEmail = (email) => {
			const emailPattern = new RegExp('^[\\w-]+(.[\\w-])*(\\w)*@[a-zA-Z0-9]+(\\.[a-zA-Z0-9]+)+$');
			return emailPattern.test(email);
			
		};
		let testRepeated = (password, repeatedPassword) => {
			return password === repeatedPassword;
		};
		$('#email').on('blur', (e) => {
			let email = $(e.target).val();
			if (email === '')
				return;
			/*验证是否是邮箱*/
			if (!testEmail(email)) {
				$('#availableStatus').attr('class', 'red')
						.text('Wrong Email Pattern');
				return;
			}
			let data = 'email=' + email;
			
			data = encodeURI(data);
			/*最后写为键值对的情况*/
			$.ajax({
				url: 'isEmailAvailable',
				
				contentType: 'json',
				method: 'GET',
				data: data,
				success: (data, status) => {
					if (data === 'true') {
						$('#availableStatus')
								.text('Available')
								.attr('class', 'green');
					}
					else if (data === 'false') {
						$('#availableStatus')
								.text('Unavailable')
								.attr('class', 'red');
					}
				}
			});
		});
		$('#repeatedPassword').on('blur', (e) => {
			let repeated = $(e.target).val();
			let password = $('#password').val();
			if (!testRepeated(password, repeated)) {
				$('#repeatedPasswordStatus').text('Not Equal With Password');
			}
			else
				$('#repeatedPasswordStatus').text('');
		});
		$('#submitButton').on('click', (e) => {
			e.preventDefault();
			let verifyCode = $('#verifyCodeInput').val();
			$.get('Verify', 'verifyCode=' + verifyCode,
					(data, status) => {
						if (data !== 'true') {
							alert('Wrong Verify Code!');
							$('#verifyCodeImg').click();
						}
						else if (data === 'true') {
							let email = $('#email').val();
							let password = encrypter.encrypt($('#password').val());
							let repeated = $('#repeatedPassword').val();
							let json = JSON.stringify({email: email, password: password});
							if (testEmail(email) && testRepeated(password, repeated)) {
								$.ajax({
									url: 'Register',
									method: 'POST',
									contentType: 'application/json',
									data: json,
									success: (data, status) => {
										if (data !== 'success') {
											alert('Unknown Wrong!');
										}
										else {
											alert('Register Succeed');
											window.location = 'Main';
										}
										
									}
								});
							}
						}
						else {
							alert('Unknown Wrong');
						}
					});
		});
		const verifyCodeImg = $('#verifyCodeImg');
		const verifyCodeUrl = verifyCodeImg.attr('src');
		verifyCodeImg.on('click', () => {
			verifyCodeImg.attr('src', verifyCodeUrl + '?' + Math.random());
			$('#verifyCodeInput').val('');
		});
	});
</script>
<!--
<script type="text/javascript">
var xmlHttpRequest;
function createXMLHttpRequest()
{
if (window.XMLHttpRequest) //非IE浏览器
{
xmlHttpRequest = new XMLHttpRequest();
}
else if (window.ActiveObject)//IE6以上浏览器
{
xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
}
else //IE6及以下浏览器
{
xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
}
}

function usernameIsExist()
{
var username = document.userInfo.username.value;
sendRequest("usernameValidation?username="+username);
}

function sendRequest(url){
createXMLHttpRequest();
xmlHttpRequest.open("GET", url, true);
xmlHttpRequest.onreadystatechange = processResponse;
xmlHttpRequest.send(null);
}

function processResponse(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var responseInfo = xmlHttpRequest.responseXML.getElementsByTagName("info")[0].firstChild.data;
var div1 = document.getElementById("usernameInfo");
if(responseInfo == "Exist"){
div1.innerHTML="<font color='red'>The User ID is Exist</font>";
}
else{
div1.innerHTML="<font color='green'>The User ID is Available</font>";
}
}
}
}

</script>
-->
<div id="content">
	<div id="Catalog">
		<!--<form action="Register" method="post">
			<h3>User Information</h3>
			<table>
				<tr>
					<td>Email Address:</td>
					<td>
						<input type="text" name="email" value=""/>
					</td>
				</tr>
				<tr>
					<td>Password:</td>
					<td><input type="password" name="password" /></td>
				</tr>
				<tr>
					<td>Repeat Password:</td>
					<td><input type="password" name="repeatedPassword"/></td>
	
			</table>
	
			<include file="IncludeAccountFields.html"/>
	
			<input type="submit" name="newAccount" value="Save Account Information"/>
	
		</form>
		-->
		<form autocomplete="off">
			<p style="text-align: center"></p>
			<div class="MyContainer" style="width: 400px; text-align: center">
				<div style="width: 100%; display: inline-block;">
					<div class="MyContainer grey">
						<label class="hint" for="email">Email:</label>
						<span class="loginInfo"><input id="email" name="email" type="email"></span>
					</div>
					<div class="MyContainer grey">
						<label class="hint" for="password">Password:</label>
						<span class="loginInfo"><input id="password" name="password" type="password"></span>
					</div>
					<div class="MyContainer grey">
						<label class="hint" for="repeatedPassword" style="width: 49%;">Repeat Password:</label>
						<span class="loginInfo" style="width: 49%;"><input id="repeatedPassword" name="repeatedPassword"
																		   type="password"></span>
					</div>
					
					<div class="MyContainer grey">
						<label class="hint" for="verifyCodeInput"> Verify Code</label>
						<span class="loginInfo" style="width: 24%">
                        <img alt="Verify Code" id="verifyCodeImg" src="VerifyCode"
							 style="height: 20px;width: 80px;display: inline-block;vertical-align: middle;">
                    </span>
						<span class="loginInfo" style="width: 44%"><input id="verifyCodeInput" name="userVerifyCode"
																		  type="text"></span>
					</div>
					
					<div class="MyContainer grey">
						<input class="button" id="submitButton" name="login" type="submit" value="Submit"/>
					</div>
				</div>
				<p class="red" id="availableStatus"></p>
				<p class="red" id="repeatedPasswordStatus"></p>
			</div>
		</form>
	</div>
</div>
<div th:include="common/bottom.html::bottom"></div>
</body>
</html>